<template>
  <div class="footer">
    <ul>
      <li
        v-for="(footer, index) in footers"
        v-html="footer.footer"
        @click="footerIn(footers, index)"
        :class="[$route.path === footer.path?className:'']"
      >
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'footer',
    param: [
      'current'
    ],
    data () {
      return {
        className: 'current',
        footers: [
          {
            footer: '空间站',
            current: true,
            path: '/'
          },
          {
            footer: '课程',
            current: false,
            path: '/classList'
          },
          {
            footer: '我的预约',
            current: false,
            path: '/mybooking'
          },
          {
            footer: '乐动卡',
            current: false,
            path: '/card'
          }
        ]
      }
    },
    methods: {
      footerIn: function (footers, index) {
        footers.forEach(function (el) {
          el.current = false
        })
        footers[index].current = true
        this.$router.push(this.footers[index].path)
      }
    }
  }
</script>

<style scoped lang="less">
  .footer{
    width: 100%;
    height: 4.9/10rem;
    background: linear-gradient(to bottom, #df1b6b 0%,#a61ba3 100%);
    position: fixed;
    z-index: 999;
    left:0;
    bottom:0;
    z-index:3;
    ul{
      width: 100%;
      height: 4.9/10rem;
      color: pink;
      li{
        float: left;
        width: 25%;
        height: 4.9/10rem;
        line-height:4.9/10rem;
        text-align: center;
        font-size:1.7/10rem;
      }
      .current{
        color: #fff;
      }
    }
  }
</style>
